<template>
  <div>
    <!-- 登录页 -->
    <div class="loginAll" >
      <!-- 登录部分 -->
      <div class="bcakBlur backClass"></div>
      <div class="pages font-pages">
        <!-- 图标+标题 -->
        <div class="title">
          <img src="/navigation/img12.png" alt="" v-if="
            selectName == 'first' ||
            selectName == 'seconed' ||
            selectName == 'fourth'
          " />
          <span v-if="selectName == 'first'">登录到四川酒店通</span>
          <span v-if="selectName == 'seconed'">找回您的密码</span>
          <span v-if="selectName == 'third'" class="enter">入驻四川酒店通</span>
          <span v-if="selectName == 'fourth'">修改您的密码</span>
        </div>
        <!-- 文字介绍 -->
        <div class="textMassage" v-if="selectName == 'first'">
          {{ text }}
        </div>
        <div class="textMassage" v-if="selectName == 'seconed' || selectName == 'fourth'">
          我们将验证码以短信的形式发送到您的手机
        </div>
        <div class="setPwdClass" v-if="selectName == 'fourth'">修改密码</div>
        <!-- 选择登录方式 -->
        <div class="centerMian" v-if="selectName == 'first' || selectName == 'seconed'">
          <t-tabs v-model="loginMethod" @change="loginClick">
            <t-tab-panel label="密码登录" value="pwdLogin" v-if="selectName == 'first'">
              <!-- 表单 -->
              <t-form ref="loginFormData" :data="loginForm" :rules="loignRules" labelWidth="80px" @submit="onSubmit1" @validate="onValidate" >
                <t-form-item name="account">
                  <t-input v-model="loginForm.account" placeholder="请输入账号" :maxlength="11"
                    clearable>
                  </t-input>
                </t-form-item>
                <t-form-item name="pwd" >
                  <t-input type="password" v-model="loginForm.pwd" placeholder="请输入密码"  :maxlength="6"
                    clearable>
                  </t-input>
                </t-form-item>
                <t-form-item>
                  <div class="wordMassage" v-if="selectName == 'first'">
          <div class="leftMassage">
            <span>没有账号，</span>
            <span @click="enterPush" class="span2">立即入驻</span>
          </div>
          <div class="rightMassage" @click="fotgetPwd">忘记密码 ?</div>
        </div>
                </t-form-item>
                <t-form-item >
              <button  type="submit"  class="btn">登录</button>
              </t-form-item>
              </t-form>
            </t-tab-panel>
            <t-tab-panel label="手机登录" value="captchaLogin" v-if="selectName == 'first'">
              <t-form ref="captchaFormData" :data="captchaForm" :rules="captchaRules" labelWidth="80px"  @submit="onSubmit2" @validate="onValidate">
                <t-form-item name="num">
                  <t-input v-model="captchaForm.num" placeholder="请输入手机号" 
                    :maxlength="11" clearable>
                  </t-input>
                </t-form-item>

                <t-form-item class="itemSpanClass" name="captcha">
                  <t-input type="text" v-model="captchaForm.captcha" placeholder="请输入验证码" :maxlength="6"
                     clearable>
                  </t-input>
                  <span class="s1" v-if="captchaForm.num.length != 11">获取验证码</span>
                  <span class="s2" @click="getCaptcha('captchaFormData')" v-if="captchaForm.num.length == 11">{{ btnText
                    }}</span>
                </t-form-item>
                <t-form-item>
                  <div class="wordMassage" v-if="selectName == 'first'">
          <div class="leftMassage">
            <span>没有账号，</span>
            <span @click="enterPush" class="span2">立即入驻</span>
          </div>
        </div>
                </t-form-item>
                <t-form-item>
              <button  type="submit"  class="btn">登录</button>
                </t-form-item>
              </t-form>
            </t-tab-panel>
            <t-tab-panel label="手机验证" value="sjCaptchaLogin" v-if="selectName == 'seconed'">
              <t-form ref="sjCaptchaFormData" :data="sjCaptchaForm" :rules="sjCaptchaRules" labelWidth="80px"  @submit="onSubmit3" @validate="onValidate">
                <t-form-item name="num" class="inputClass">
                  <t-input placeholder="请输入手机号" :maxlength="11" v-model="sjCaptchaForm.num" class="input-with-select"
                    clearable>
                    <t-select v-model="selectNum" slot="prepend" placeholder="请选择">
                      <t-option v-for="(item, i) in optionData" :key="`q${i}`" :label="item.label"
                        :value="item.value"></t-option>
                    </t-select>
                  </t-input>
                </t-form-item>
            
                <t-form-item name="captcha" class="itemSpanClass">
                  <t-input type="text" v-model="sjCaptchaForm.captcha" placeholder="请输入验证码" :maxlength="6"
                   clearable>
                  </t-input>
                  <span class="s1" v-if="sjCaptchaForm.num.length != 11">获取验证码</span>
                  <span class="s2" @click="getCaptcha('sjCaptchaFormData')" v-if="sjCaptchaForm.num.length == 11">{{
                    btnText }}</span>
                </t-form-item>
                <t-form-item>
                  <div class="btnaDicClass">
                    <button @click="setPwd()" v-if="selectName == 'seconed'" class="setClass">
            找回密码
          </button>
          <button @click="backLogin()" v-if="selectName == 'seconed'" class="backLogin">
            返回登录
          </button>
                  </div>
            
                </t-form-item>
              </t-form>
            </t-tab-panel>
          </t-tabs>
        </div>
        <!-- 立即入驻表单 -->
        <div class="centerMian" v-if="selectName == 'third'">
          <t-form ref="settledFormData" :data="settledForm" :rules="settledRules" labelWidth="80px">
            <t-form-item name="num">
              <t-input placeholder="请输入手机号" v-model="settledForm.num" class="input-with-select" :maxlength="11" 
               clearable>
                <t-select v-model="settledSelectNum" slot="prepend" placeholder="请选择">
                  <el-option v-for="(item, i) in optionData" :key="`q${i}`" :label="item.label"
                    :value="item.value"></el-option>
                </t-select>
              </t-input>
            </t-form-item>
            <t-form-item name="captcha" class="itemSpanClass">
              <t-input type="text" v-model="settledForm.captcha" placeholder="请输入验证码" :maxlength="6"
                clearable>
              </t-input>
              <span class="s1" v-if="settledForm.num.length != 11">获取验证码</span>
              <span class="s2" @click="getCaptcha('settledFormData')" v-if="settledForm.num.length == 11">{{ btnText
                }}</span>
            </t-form-item>
            <t-form-item>
              <button @click="settle()" v-if="selectName == 'third'" class="btn">
            立即入驻
          </button>
            </t-form-item>
          </t-form>
        </div>
        <!-- 修改密码表单 -->
        <div class="centerMian" v-if="selectName == 'fourth'">
          <t-form ref="setPwdFormData" :data="setPwdForm" :rules="setPwdRules" labelWidth="80px"  >
            <t-form-item name="pwd">
              <t-input type="password" placeholder="请输入密码" v-model="setPwdForm.pwd" class="input-with-select"
              clearable :maxlength="6">
              </t-input>
            </t-form-item>
            <t-form-item name="enterPwd" class="itemSpanClass">
              <t-input  type="password" v-model="setPwdForm.enterPwd" placeholder="确定密码" :maxlength="6"
               clearable>
              </t-input>
              <span class="s1" v-if="setPwdForm.pwd == ''">获取验证码</span>
              <span class="s2" @click="getCaptcha('setPwdFormData')" v-if="setPwdForm.pwd != ''">{{ btnText }}</span>
            </t-form-item>
          </t-form>
        </div>
        <!-- 提示性文字 -->
        <!-- <div class="wordMassage" v-if="selectName == 'first'">
          <div class="leftMassage">
            <span>没有账号，</span>
            <span @click="enterPush" class="span2">立即入驻</span>
          </div>
          <div class="rightMassage" @click="fotgetPwd">忘记密码 ?</div>
        </div> -->

        <!-- 登录按钮 -->
        <div class="butClass">
          <!-- <button  type="submit"  v-if="selectName == 'first'">登录</button> -->
          <!-- <button @click="setPwd()" v-if="selectName == 'seconed'" class="setClass">
            找回密码
          </button>
          <button @click="backLogin()" v-if="selectName == 'seconed'" class="backLogin">
            返回登录
          </button> -->
          <!-- <button @click="settle()" v-if="selectName == 'third'">
            立即入驻
          </button> -->
          <button @click="saveChange()" v-if="selectName == 'fourth'">
            保存修改
          </button>
        </div>
        <div class="centerMassage" v-if="selectName == 'fourth'">
          <span v-for="(item, i) in textData" :key="`w${i}`">{{ item }}</span>
        </div>
      </div>
    </div>
    <!-- <SignInProcess ></SignInProcess> -->
  </div>
</template>
<script>
import { LockOnIcon } from 'tdesign-icons-vue';
// import SignInProcess from "./signInProcess.vue";
import { isvalidPhone } from './index'
export default {
  // components: {
  //   SignInProcess,
  // },
  components: {
    LockOnIcon,
  },
  data() { 
    var validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) { //判断用户输入的值是否符合规则
        callback(new Error('请输入格式正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      isvalidPhone,
      selectName: "first", //控制页面转换
      loginMethod: "pwdLogin", //登录方式值
      text: "我们的服务管理系统以“IncomeNexus”为核心，致力于为加入平台的每个酒店商家提供稳定和可预测的入流", //文字介绍
      loginForm: { account: "", pwd: "" }, //手机登录表单
      captchaForm: { num: "", captcha: "" }, //验证码登录表单
      sjCaptchaForm: { num: "", captcha: "" }, //找回密码表单
      settledForm: { num: "", captcha: "" }, //入驻表单
      setPwdForm: { pwd: "", enterPwd: "" }, //修改密码表单
      selectNum: "", //选择手机号区号
      settledSelectNum: "", //入驻页面手机号区号
      reg: '',//手机号校验
      // validPhone:'',//手机号验证规则
      //  密码登录规则
      loignRules: {
        account: [
          { required: true, message: "请输入账号" },
          { min: 3, max: 16, message: "长度在 3 到 16 个字符" },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8个字符", trigger: "blur" },
        ],
      },
      // 手机号登录规则
      captchaRules: {
        num: [
          { required: true, validator: validPhone, trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "请输入验证码" },
          { min: 3, max: 8, message: "长度在 3 到 8个字符" },
        ],
      },
      // 手机号验证规则
      sjCaptchaRules: {
        num: [
          { required: true, validator: validPhone, trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "请输入验证码" },
          { min: 3, max: 8, message: "长度在 3 到 8个字符" },
        ],
      },
      //修改密码验证
      setPwdRules: {
        pwd: [
          { required: true, message: "请输入验证码" },
          { min: 3, max: 8, message: "长度在 3 到 8个字符" },
        ],
        enterPwd: [
          { required: true, message: "请输入验证码" },
          { min: 3, max: 8, message: "长度在 3 到 8个字符" },
        ],
      },
      //入驻验证规则
      settledRules: {
        num: [
          { required: true, validator: validPhone, trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "请输入验证码" },
          { min: 3, max: 8, message: "长度在 3 到 8个字符" },
        ],
      },
      // 手机号区号选择值
      optionData: [{ label: "+86", value: 1 }],
      // 修改密码提示性文字
      textData: [
        ".密码长度至少8位",
        ".含大小字母，数字，符号三种",
        ".不使用与其他网站相同的密码",
        "定期修改密码",
      ],
      btnText: "获取验证码",
    };
  },
  methods: {

    //
    
    // 登录方式改变事件
    loginClick() { },
    //登录验证
    onSubmit1({ validateResult, firstError }) {
        if (validateResult === true) {
        this.$message.success('提交成功');
        this.$router.push('/signInProcess')
      } else {
        console.log('Errors: ', validateResult);
        this.$message.warning(firstError);
      }
    },
    onSubmit2({ validateResult, firstError }) {
      if (validateResult === true) {
        this.$message.success('提交成功');
      } else {
        console.log('Errors: ', validateResult);
        this.$message.warning(firstError);
      }
    },
    onValidate({ validateResult, firstError }) {
      if (validateResult === true) {
        console.log('Validate Success');
      } else {
        console.log('Validate Errors: ', firstError, validateResult);
      }
    },
    //忘记密码
    fotgetPwd() {
      this.selectName = "seconed";
      this.loginMethod = "sjCaptchaLogin";
    },
    // 找回密码
    setPwd({ validateResult, firstError }) {
      if (validateResult === true) {
        this.$message.success('提交成功');
      } else {
        console.log('Errors: ', validateResult);
        this.$message.warning(firstError);
      }
    
    },
    // 返回登录四川
    backLogin() {
      this.selectName = "first";
      this.loginMethod = "pwdLogin";
    },
    // 立即入驻按钮
    settle({ validateResult, firstError }) {
    debugger  
    if (validateResult === true) {
        this.$message.success('提交成功');
      } else {
        console.log('Errors: ', validateResult);
        this.$message.warning(firstError);
      }
  
    },
    //立即入驻文字
    enterPush() {
      this.selectName = "third";

    },
    // 保存修改
    saveChange() {
      this.selectName = "first";
      this.loginMethod = "pwdLogin";
    },
    //获取验证码按钮
    getCaptcha(v) {
      if (v == "captchaFormData") {
        this.$refs.captchaFormData.validateField("num", (errorMessage) => {
          if (!errorMessage) {
            this.$message("已发送验证码，请查收");
            setTimeout(() => {
              this.doLoop(60);
            }, 500);
          } else {
            return false;
          }
        });
      }
      if (v == "sjCaptchaFormData") {
        this.$refs.sjCaptchaFormData.validateField("num", (errorMessage) => {
          if (!errorMessage) {
            this.$message("已发送验证码，请查收");
            setTimeout(() => {
              this.doLoop(60);
            }, 500);
          } else {
            return false;
          }
        });
      }
      if (v == "settledFormData") {
        this.$refs.settledFormData.validateField("num", (errorMessage) => {
          if (!errorMessage) {
            this.$message("已发送验证码，请查收");
            setTimeout(() => {
              this.doLoop(60);
            }, 500);
          } else {
            return false;
          }
        });
      }
      if (v == "setPwdFormData") {
        this.$refs.captchaFormData.validateField("pwd", (errorMessage) => {
          if (!errorMessage) {
            this.$message("已发送验证码，请查收");
            setTimeout(() => {
              this.doLoop(60);
            }, 500);
          } else {
            return false;
          }
        });
      }
    },
    //手机号 为空的话

    //手机验证码倒计时
    doLoop(seconds) {
      seconds = seconds ? seconds : 60;
      this.btnText = seconds + "s后获取";
      let countdown = setInterval(() => {
        if (seconds > 0) {
          this.btnText = seconds + "s后获取";
          --seconds;
        } else {
          this.btnText = "获取验证码";
          clearInterval(countdown);
        }
      }, 1000);
    },
  },
  mounted() { },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}

.loginAll {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-image: url(/public/login/image1.png);
  background-position: center;
  background-size: cover;
}

.backClass {
  background-image: url(/public/login/image1.png);
  width: 720px;
  height: 100%;
}

.bcakBlur {
  float: left;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(16.3px);
  -moz-filter: blur(16.3px);
  -o-filter: blur(16.3px);
  -ms-filter: blur(16.3px);
  filter: blur(16.3px);
}

.font-pages {
  position: absolute;
  width: 720px;
  height: 100%;
  text-align: center;
}

.pages {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 160px;
}

.title {
  width: 400px;
  height: 44px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 36px;
  color: #1d2129;
  line-height: 44px;
  text-align: left;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  img {
    width: 43px;
    height: 43px;
    margin-right: 20px;
  }
}

.textMassage {
  width: 396px;
  height: 48px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #4e5969;
  line-height: 24px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-bottom: 56px;
}

.wordMassage {
  width: 400px;
  height: 22px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  span {
    color: #333;
    opacity: 0.44;
  }

  .span2 {
    color: #3270ff;
    opacity: 1;
  }

  .rightMassage {
    color: #3270ff;
  }
}

.butClass {
  margin-top: 48px;
  width: 400px;
  height: 44px;

  button {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #3270ff;
    color: #fff;
    border-radius: 4px;
  }

  .backLogin {
    margin-top: 24px;
    background-color: #f2f3f5;
    color: #4e5969;
  }
}

.setPwdClass {
  width: 80px;
  height: 28px;
  font-weight: 500;
  font-size: 20px;
  color: #1d2129;
  line-height: 28px;
  text-align: left;
  margin-bottom: 24px;
}

.centerMassage {
  margin-top: 24px;

  span {
    font-size: 14px;
    line-height: 22px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: #86909c;
  }
}

.enter {
  margin-bottom: 48px;
}
.itemSpanClass{
  position: relative;
  .s1 {
  position: absolute;
  right:16px;
  width: 120px;
}
.s2{
  position: absolute;
  right:16px;
  width: 120px;
  color:#3270ff
}
}

.btn{
  width: 400px;
  height: 44px;
  border:none;
  background-color: #3270ff;
  color:#fff;

}
.btnaDicClass{
  display: flex;
  flex-direction: column;
  margin-top: 24px;

}
.setClass{
  width: 400px;
  height: 44px;
  border:none;
  background-color: #3270ff;
  color:#fff;
  margin-bottom: 24px;

}
.backLogin{
  width: 400px;
  height: 44px;
  border:none;
  background-color: #f2f3f5;
  color:#4e5969;
}
::v-deep .t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover .t-tabs__nav-item-wrapper {
  background-color: transparent;
}

::v-deep .t-tabs {
  background-color: transparent;
}

::v-deep .t-form {
  margin-top: 20px;
}

::v-deep .t-tabs__nav-container.t-is-top::after {
  background-color: transparent;
}
::v-deep .t-form__controls-content {
  margin-bottom: 24px;
}
::v-deep .t-input{
  height: 46px;
}
::v-deep .t-form__controls{
  .t-input__extra{
    width: 22%;
  position: absolute ;
  top:50px !important;
}
}

</style>
